import { useUserStore } from "@/stores/user";
import type { Directive, DirectiveBinding } from "vue";

//指令到底是什么
//指令就是对某个DOM功能操作的封装

export const focus:Directive  = {
  mounted(el:HTMLElement,binding:DirectiveBinding){
    el.focus()
  }
}
export const color:Directive = {
  mounted(el:HTMLElement,bind:DirectiveBinding<string>){
    el.style.color = bind.value 
  },
  updated(el,binging){
    el.style.color = binging.value
  }
}
// 管理员权限特殊处理
const adminPerms = '*:*:*'
export const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    const store = useUserStore()
    const permissions = store.profile.permissions
    // 管理员的
    if (permissions.includes(adminPerms)) {
      return
    }
    // 如果是其它用户的
    if(!permissions.includes(binding.value)){
      // 删除自身
      el.remove()
    }
  },
};